<template>
  <view>
    <view class="content">
      <image class="hotActivity" mode="widthFix" src="../../static/热门活动.jpg"
             @click="goto('./hotActivity/hotActivity')"></image>
      <!-- 列表 -->
      <!-- uni-segmented-control 分段器 -->
      <uni-segmented-control :current="current" :values="items" active-color="#1CA967" class="title"
                             style-type="text" @clickItem="onClickItem"/>

      <!-- 全部内容 -->
      <view v-if="current === 0">
        <uni-list v-for="(item) in article" style="width: 100%;">
          <!-- 在uni-list v-for="item in article" -->
          <uni-list-item class="list" clickable title=""
                         @click="goto('./topicDetails/topicDetails?id='+item.id)">
            <template v-slot:header>
              <view class="listContainer">
                <text class="listContainer-title">{{ item.name }}</text>
                <text class="listContainer-content">{{ item.content }}</text>
                <text class="listContainer-source">{{ item.author }}</text>
              </view>
              <image :src="getImage(item.images)" class="image" mode="aspectFill"></image>
            </template>
          </uni-list-item>

        </uni-list>

        <u-loadmore :status="status" loading-text="加载中" nomore-text="没有更多了"></u-loadmore>
      </view>


      <!-- 新闻咨询 -->
      <view v-if="current === 1">
        <uni-list v-for="(item) in articleTypes" style="width: 100%;">
          <uni-list-item class="list" clickable title=""
                         @click="goto('./topicDetails/topicDetails?id='+item.id)">
            <template v-slot:header>
              <view class="listContainer">
                <text class="listContainer-title">{{ item.name }}</text>
                <text class="listContainer-content">{{ item.content }}
                </text>
                <text class="listContainer-source">{{ item.author }}</text>
              </view>
              <image :src="getImage(item.images)" class="image" mode="aspectFill"></image>
            </template>
          </uni-list-item>
        </uni-list>
        <u-loadmore :status="status" loading-text="加载中" nomore-text="没有更多了"></u-loadmore>
      </view>
      <!-- 热门话题 -->
      <view v-if="current === 2">
        <uni-list v-for="(item) in articleTypes" style="width: 100%;">
          <uni-list-item class="list" clickable title=""
                         @click="goto('./topicDetails/topicDetails?id='+item.id)">
            <template v-slot:header>
              <view class="listContainer">
                <text class="listContainer-title">{{ item.name }}</text>
                <text class="listContainer-content">{{ item.content }}</text>
                <text class="listContainer-source">{{ item.author }}</text>
              </view>
              <image :src="getImage(item.images)" class="image" mode="aspectFill"></image>
            </template>
          </uni-list-item>
        </uni-list>
        <u-loadmore :status="status" loading-text="加载中" nomore-text="没有更多了"></u-loadmore>
      </view>
      <view v-if="current === 3">
        <uni-list v-for="(item) in articleTypes" style="width: 100%;">
          <uni-list-item class="list" clickable title=""
                         @click="goto('./topicDetails/topicDetails?id='+item.id)">
            <template v-slot:header>
              <view class="listContainer">
                <text class="listContainer-title">{{ item.name }}</text>
                <text class="listContainer-content">{{ item.content }}
                </text>
                <text class="listContainer-source">{{ item.author }}</text>
              </view>
              <image :src="getImage(item.images)" class="image" mode="aspectFill"></image>
            </template>
          </uni-list-item>
        </uni-list>
		<u-loadmore :status="status" loading-text="加载中" nomore-text="没有更多了"></u-loadmore>
      </view>
    </view>
	<!-- 占位置，把被导航栏的遮住的文章列表空间留出来 -->
	<view  style="height: 130rpx;"></view>
	<Tabbar style="position: fixed;"  cureenPage='finding'></Tabbar>
  </view>
</template>

<script>
import findingApi from '../../common/FindingService/FindingApi';
import Tabbar from '../../components/common/Tabbar.vue'

export default {
  data() {
    return {
      items: ['全部内容', '新闻咨询', '热门话题', '回收攻略'],
      current: 0,
      // 传文章类型id到文章详情页
      categoryId: '0',
      // 存储全部内容文章
      article: [],
      // 存储不同类型的文章
      articleTypes: [],
      status: 'loadmore',
      currentPage: 1,
      pageSize: 5,
    }
  },
  components: {
    Tabbar
  },
  onLoad() {
    // 监听滚动事件
    window.addEventListener('scroll', this.onReachBottom);
    this.listArticle()

  },
  methods: {
    // 从对象存储中获取图片
    getImage(image) {
      return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
    },

    onReachBottom() {
      if (this.status != 'nomore') {
        this.pageSize += 5;
        if (this.categoryId == 0) {
          findingApi.queryFindingArticleList({currentPage: this.currentPage, pageSize: this.pageSize}).then(res => {
            // console.log(this.currentPage,this.pageSize)
            console.log('查询全部文章内容3', res.data.data);
            this.article = res.data.data.records
            if (res.data.data.size < this.pageSize) {
              this.pageSize = res.data.data.size;
              // console.log(this.currentPage,this.pageSize)
              this.status = 'nomore';
            }
          })
        } else {
          this.listTypesArticle(this.categoryId)
        }
      }
    },
    // 点击不同类型的文章
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
        this.categoryId = String(e.currentIndex);
        // console.log('类型id',this.categoryId)
        this.listTypesArticle(this.categoryId)
      }
    },

    goto(url) {
      uni.navigateTo({
        url
      })
    },

    // 显示发现页(全部内容)的文章列表
    listArticle() {

      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }

      findingApi.queryFindingArticleList(params).then(res => {
        console.log('查询全部文章内容2', res.data.data);
        this.article = res.data.data.records
      })
    },


    // 点击查询发现页不同类型的文章列表,例如新闻咨询
    listTypesArticle(categoryId) {
      let params = {
        number: this.pageSize,
        categoryId: categoryId
      }
      findingApi.queryFindingTypesArticleList(params).then(res => {
        console.log('查询到不同类型的文章', res)
        this.articleTypes = res.data.data.records
        // 触底后判断是否还有数据,且没有数据后不在发请求
        if (res.data.data.size < this.pageSize) {
          this.pageSize = res.data.data.size;
          this.status = 'nomore';
        }
      })
    },
  },
}
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20 rpx;
  // position: relative;


  .hotActivity {
    width: 95%;
	margin-top: $uni-spacing-col-sm;
    border-radius: $uni-border-radius-lg*2;
    box-shadow: 3px 2px #eee;
  }

  .title {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: $uni-spacing-col-base;

    .titleList {
      width: 21%;
      margin: $uni-spacing-col-base 0 0 $uni-spacing-col-base;
      border-bottom: 3px solid transparent;

      /deep/ .uni-list-item__container {
        padding: $uni-spacing-row-sm;

        .uni-list-item__content {
          padding-right: 0;
          text-align: center;
        }
      }
    }

    .active {
      border-bottom-color: green;
    }
  }

  .list {
    width: 90vw;
    border: 1px solid $uni-text-color-disable;
    border-radius: $uni-border-radius-lg;
    margin: $uni-spacing-col-lg $uni-spacing-col-lg;

    /deep/ .uni-list-item__container {
      padding: $uni-spacing-col-base $uni-spacing-col-sm;
    }

    .listContainer {
      width: 60%;
      display: flex;
      flex-direction: column;
      margin-right: $uni-spacing-row-base;
      margin-left: $uni-spacing-row-base;

      .listContainer-title {
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

      }

      .listContainer-content {
        font-size: $uni-font-size-sm;
        color: $uni-text-color-placeholder;
        margin: $uni-spacing-col-base 0;
        @include ellipsis-2;

      }

      .listContainer-source {
        font-size: $uni-font-size-base;
        color: $uni-text-color-placeholder;
      }
    }

    .image {
      width: 40%;
      height: auto;
      margin-right: $uni-spacing-row-sm;
      border-radius: $uni-border-radius-lg;
    }

    /deep/ .uni-list-item__content {
      padding: 0;
    }
  }
}

</style>